<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-09-27 16:34:24
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-09-27 17:25:03
 * @FilePath: \aqscpx_admin\src\pages\park\exam-management\components\detail-dialog1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import { ref } from "vue";
import {
	getEnumOptionsField,
	COURSE_TYPE_OPTIONS,
} from "@/config/enum-options";
import {
	jeecgBootExExamGetUsingGet,
	jeecgBootExExamGetEveryUsingGet,
} from "@/genapi/exam";
import { injectState } from "../state";

defineOptions({ name: "DetailDialog1" });

const img = import.meta.glob("./assets/*.png", {
	import: "default",
	eager: true,
});

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"download" | "write" | "read">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (
	_type: "download" | "write" | "read",
	value = {} as any,
) => {
	type.value = _type;
	debugger;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	search();
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<(typeof page.records.value)[0]>({});

const title = computed(() => {
	return "考试详情";
});
const tableData = ref([]);

const keyword = ref("");

const reset = () => {
	keyword.value = "";
};

const search = async () => {
	const res = await jeecgBootExExamGetUsingGet({
		params: {
			examId: model.value.id,
		},
	});
	tableData.value = res.result;
};

const isShowDialog = ref(false);
const activeRow = ref({});
const dialogData = ref([]);

const openDialog = async (row) => {
	const res = await jeecgBootExExamGetEveryUsingGet({
		params: {
			examId: model.value.id,
			phone: row.phone,
		},
	});
	dialogData.value = res.result;
	isShowDialog.value = true;
	activeRow.value = row;
};
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="1200px!"
	>
		<el-scrollbar style="height: 508px">
			<el-form class="filter-form" inline>
				<div>
					<el-form-item label="搜索内容" prop="搜索内容">
						<el-input
							v-model="keyword"
							clearable
							class="w-200px!"
							placeholder="请选择"
						/>
					</el-form-item>
					<el-form-item>
						<el-divider direction="vertical" h="32px!" m="r-22px!" />
						<el-button type="primary" @click="search" size="small">
							<template #icon>
								<el-icon class="i-custom:search" />
							</template>
							查询
						</el-button>
						<el-button @click="reset" size="small">
							<template #icon>
								<el-icon class="i-custom:reset" />
							</template>
							重置
						</el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table size="small" :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="考试人员" width="160" />
				<el-table-column prop="retry" label="考试次数" width="160" />
				<el-table-column prop="topScore" label="最高分" width="160" />
				<el-table-column prop="examStatus" label="是否通过" width="160">
					<template #default="scope">
						<el-tag
							size="small"
							type="primary"
							v-if="scope.row.examStatus === '0'"
						>
							{{ scope.row.examStatusText }}
						</el-tag>
						<el-tag
							size="small"
							type="primary"
							v-else-if="scope.row.examStatus === '1'"
						>
							{{ scope.row.examStatusText }}
						</el-tag>
						<el-tag
							size="small"
							type="danger"
							v-else-if="scope.row.examStatus === '2'"
						>
							{{ scope.row.examStatusText }}
						</el-tag>
						<el-tag
							size="small"
							type="success"
							v-else-if="scope.row.examStatus === '3'"
						>
							{{ scope.row.examStatusText }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="endTime" label="最后考试时间" width="200" />
				<el-table-column fixed="right" label="操作">
					<template #default="scope">
						<el-button
							link
							type="primary"
							size="small"
							@click="openDialog(scope.row)"
						>
							考试明细
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-scrollbar>
	</PromiseDialog>
	<el-dialog v-model="isShowDialog" title="考试明细" width="800">
		<el-scrollbar style="height: 508px">
			<div style="margin-bottom: 10px; font-size: 16px; font-weight: 600">
				{{ activeRow.name }}
			</div>
			<div class="dataItemCard" v-for="(item, i) in dialogData" :key="i">
				<div class="cardItem">考试时间：{{ item.endTime }}</div>
				<div class="cardItem">考试用时：{{ item.elapsed }}</div>
				<div class="cardItem">考试得分：{{ item.score }}</div>
				<div class="cardItem">
					是否合格：{{ item.passed ? "及格" : "不及格" }}
				</div>
			</div>
		</el-scrollbar>
	</el-dialog>
</template>

<style lang="scss" scoped>
.dataItemCard {
	background-color: rgba(197, 197, 197, 0.137);
	width: 100%;
	height: 70px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	box-sizing: border-box;
	margin-bottom: 10px;
	.cardItem {
		width: 50%;
		height: 50%;
		line-height: 36px;
	}
}
.trainingListBox {
	width: 100%;
	padding: 0px 30px;

	.listBoxTitle {
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
	}
}
.item {
	width: 100px;
	/* 调整elementUI中样式 如果不需要调整请忽略 */
	.el-input__inner {
		height: 24px !important;
	}
}
.txt {
	line-height: 24px;
	padding: 0 9px;
	box-sizing: border-box;
}
</style>
